<template>
	<div class="text-center">
		<img v-if="questionImg" class="topic-image" :src="questionImg" width="100%" />
		<div v-else class="topic-title">
			<span>{{ props.data?.data?.title_topic || '' }}</span>
		</div>
		<div v-if="!showInput" class="count">
			<span class="n">答题结果</span>
		</div>
		<img v-if="answerImg" class="topic-image" :src="answerImg" width="100%" />
	</div> 
</template>

<script setup>
import { ref, computed } from "vue"
import { getStaticUrl, urlImageToBase64 } from "@/utils"
import Props from "../props.js"
const props = defineProps({
	...Props
})
const emit = defineEmits(['answer'])

const questionImg = ref('')
const answerImg = ref('')

const qImgSrc = () => {
	const src = props.data?.data?.images
	return src ? getStaticUrl(src) : false
}
const aImgSrc = () => {
	const src = props.result?.result
	return src ? getStaticUrl(src) : false
}

const getImageFile = () => {
	const qImgUrl = qImgSrc()
	const aImgUrl = aImgSrc()
	
	return new Promise((resolve, reject)=>{ 
		// 问题图片
		if(qImgUrl) {
			urlImageToBase64(qImgUrl).then(qimg => {
				questionImg.value = qimg
				if(aImgUrl) {
					// 答案图片
					urlImageToBase64(aImgUrl).then(ares => {
						answerImg.value = ares
						resolve()
					})
				}else{
					resolve()
				}
			}).catch(() => {
				reject()
			})
		}else{
			// 答案图片
			urlImageToBase64(aImgUrl).then(ares => {
				answerImg.value = ares
				resolve()
			})
		}
	})
}

defineExpose({ getImageFile })
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.topic-image {
	width: 93%;
	margin: auto;
	display: block;
}
.topic-title {
	text-align: left;
	font-size: 2rem;
	line-height: 3.7rem;
	padding: 0 2.4rem;
	display: flex;
	text {
		flex: 1;
	}
}
.count {
	position: relative;
	font-size: 1.2rem;
	text-align: center;
	color: $gray-ligh-2;
	z-index: 1;
	margin: 2rem 3rem;
	&:before {
		content: '';
		position: absolute;
		border-top: 1px dashed $gray-ligh-4;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%) scaleY(0.5);
		z-index: -1;
	}
	text {
		background-color: #fff;
		padding: 0 0.8rem;
	}
}
</style>